<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 6000px;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        该网友发布的图片显示，东莞市光正实验中学的高一新生待缴费明细中，涵盖有三项，高一住宿费1600元，高一学费2150元，最高的一项是高一代收费（校服费）4033元，合计7783元。
        校服要4000多元？评论区里不少网友表示震惊，“是奢侈品牌吗”，“校服竟然比学费贵”……
        7月17日，潇湘晨报（报料微信：xxcbbaoliao）记者联系到东莞市光正实验学校的一名工作人员，她透露，校服收费4000余元属实，但是并非乱收费，是合法合规的，价格也是教育局认可的。“包括鞋子在内，一共有30件，是穿三年的。有礼服、运动服、冲锋衣，春夏秋冬的都有。还有两双鞋子，一双皮鞋，一双运动鞋。而且就我所了解，校服里有一部分是李宁的。”
        潇湘晨报记者周凌如 实习生章家怡 周迎迎
    </div>
    <script>
        /*
        滚动条在滚动的时候触发的事件
            要监听整个网页的滚动，我们给window对象来绑定scroll事件
        */
        //监听页面的滚动事件
        window.addEventListener("scroll",function(){
            console.log("页面的滚动条正在滚动",Math.floor(window.scrollY));
        })


        //监听页面的滚动事件
        /*
        scrollHeight
　　　　　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分（不要误解为只有出现滚动条才有scroll属性）

　　　　scrollWidth
　　　　　　scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分（不要误解为只有出现滚动条才有scroll属性）

        scrollTop
　　　　　　scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

　　　　scrollLeft
            scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度

         */
        //scroll是可读写的
        document.documentElement.scrollTop=1000

        const div=document.querySelector("div")
        div.addEventListener("scroll",function(e){
            console.log(e.target.scrollTop,e.target.scrollLeft);
            console.log(e.target.scrollWidth,e.target.scrollHeight);
        })

    </script>
</body>

</html>